<!--  -->
<template>
<div style="width: 100%;background: #F5F7F9;overflow: hidden">
    <div style="width: 72%;height: 630px;margin-top: 20px;margin-left: 200px">
        <p style="margin-left: 4px;font-size: 20px;font-weight: 550">新增出库</p>
        <div style="width: 100%;height: 500px;background: white;margin-top: 30px;border-radius: 4px">
            <div style="width: 100%;height: 60px;border-bottom: 3px solid #F5F7F9;line-height: 60px">
                &nbsp;&nbsp;&nbsp;&nbsp;出库信息
            </div>
            <div style="margin-top: 30px;margin-left: 20px">
                <el-form :model="form" label-width="100px" size="large">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="出库单号" style="margin-left: 60px">
                                <el-input v-model="form.wareCode" placeholder="系统自动生成" disabled style="width: 300px"></el-input>
                            </el-form-item>
                            <el-form-item label="出库类型" style="margin-left: 60px">
                                <el-select v-model="form.wareType" placeholder="请选择出库类型" style="width: 300px">
                                    <el-option label="普通出库" value=1></el-option>
                                    <el-option label="其他出库" value=3></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="出库申请人" style="margin-left: 60px">
                                <el-input v-model="form.applicant" disabled style="width: 300px"></el-input>
                            </el-form-item>
                            <el-form-item label="出库人员" style="margin-left: 60px">
                                <el-select v-model="form.warePersonid" placeholder="请选择" style="width: 300px" @change="selPerson">
                                    <el-option v-for="person in personList" :key="person.peopleManagementId" :label="person.peopleManagementName" :value="person.peopleManagementId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="出库主题" style="margin-left: 30px">
                                <el-input v-model="form.wareTheme" style="width: 300px"></el-input>
                            </el-form-item>
                            <el-form-item label="出库日期" style="margin-left: 30px">
                                <el-date-picker v-model="form.wareTime" type="date" style="width: 300px"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="所在部门" style="margin-left: 30px">
                                <el-input v-model="form.applicantDepart" disabled style="width: 300px"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="备注" style="margin-left: 60px">
                        <el-input type="textarea" v-model="form.wareRemark" :rows="4" style="width: 860px"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>

    <div>
        <div class="form-container" style="margin-left: 200px;margin-top: -20px;background: white;width: 1200px;height: 730px;border-radius: 3px">
            <div style="width: 100%;height: 60px;border-bottom: 3px solid #F5F7F9;line-height: 60px">
                &nbsp;&nbsp;&nbsp;&nbsp;出库明细
            </div>
            <div style="margin-left: 10px;margin-top: 20px">
                <el-button type="success" @click="dialogVisible=true">添加</el-button>
                <el-button @click="removeRows">移除</el-button>
            </div>
            <div style="margin-top: 10px">
                <el-table :data="form.spareList" style="width: 100%" @selection-change="associationSelection">
                    <el-table-column type="selection"  width="50"></el-table-column>
                    <el-table-column label="序号" width="50" prop="spId"></el-table-column>
                    <el-table-column prop="spName"  width="80" label="备件名称" align="center"></el-table-column>
                    <el-table-column prop="spCode" label="备件编码" align="center"></el-table-column>
                    <el-table-column prop="spSpecification" label="规格型号" align="center"></el-table-column>
                    <el-table-column prop="spTypeName" label="备件类型" align="center"></el-table-column>
                    <el-table-column prop="upperInventory" width="80" label="库存上限" align="center"></el-table-column>
                    <el-table-column prop="lowerInventory" width="80" label="库存下限" align="center"></el-table-column>
                    <el-table-column prop="totalInventory" width="80" label="当前库存" align="center"></el-table-column>
                    <el-table-column label="本次出库数量" align="center">
                        <template slot-scope="{row}">
                            <el-input-number v-model="row.receiptQuantity" :min="1" :max="row.upperInventory-row.totalInventory"></el-input-number>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>

    <el-dialog
            title="选择备件"
            :visible.sync="dialogVisible"
            width="60%"
            :before-close="handleClose">
        <div>
            <el-input v-model="forms.codeName" placeholder="请输入备件编号或备件名称" style="width: 180px"></el-input>
            <el-button @click="chongzhi" style="margin-left: 240px">重 置</el-button>
            <el-form ref="form" :model="forms" label-width="100px" style="margin-left: 100px;margin-top: -29px">
                <el-form-item label="">
                    <el-cascader
                            v-model="forms.spTypeId"
                            :options="options"
                            :props="props"
                            @change="handleChange"
                            clearable
                            expand-trigger="hover"
                            placeholder="请选择"
                    ></el-cascader>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="spareLists" style="width: 100%" @selection-change="associationSelections">
            <el-table-column type="selection"></el-table-column>
            <el-table-column label="序号" width="80" prop="spId"></el-table-column>
            <el-table-column prop="spName" label="备件名称" align="center"></el-table-column>
            <el-table-column prop="spCode" label="备件编码" align="center"></el-table-column>
            <el-table-column prop="spSpecification" label="规格型号" align="center"></el-table-column>
            <el-table-column prop="spTypeName" label="备件类型" align="center"></el-table-column>
            <el-table-column prop="upperInventory" label="库存上限" align="center"></el-table-column>
            <el-table-column prop="lowerInventory" label="库存下限" align="center"></el-table-column>
            <el-table-column prop="totalInventory" label="当前库存" align="center"></el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
                :current-page.sync="forms.page"
                :page-size="forms.pagesize"
                :page-sizes="[10, 20, 30, 40]"
                :total="total"
                background
                layout="total, sizes ,prev, pager, next, jumper"
                style="padding: 30px 0; text-align: center"
                @current-change="selAllSpareLedger"
                @size-change="handleSizeChanges"
        />
        <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="ok">确 定</el-button>
             </span>
    </el-dialog>

    <!--最下面-->
    <div style="width: 100%;height: 50px;background: white;box-shadow: 0px -4px 4px rgb(226,228,229);position:fixed;top: 920px;z-index: 999">
        <div style="margin-left: 700px;margin-top: 15px">
            <el-button @click="closes">关闭</el-button>
            <el-button type="success" @click="okGos()">确认</el-button>
        </div>
    </div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
    //todo 此页面需要获取登陆后的数据
    //备件类型树形数据
    options:[],
    props: {
        value: 'spId',
        label: 'spTypename',
        children: 'children'
    },
    dialogVisible:false,
    form: {
        wareCode:'',
        wareType:null,
        applicant:'张三',
        warePersonid:'',
        wareTheme:'',
        applicantDepart:'采购部',
        wareRemark:'',
        wareTime:null,
        spareList:[],
        spId:0
    },
    forms:{
        codeName:null,
        spTypeId:null,
        page:1,
        pageSize:10
    },
    personList: [],
    vals:[],
    spareLists:[],
    total:0,
    list:[],
    id:0,
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    selPerson(val){
        this.form.warePersonid = val
    },
    closes(){
        this.$router.push('/outWareHousing')
    },
    okGos(){
        alert(this.id)
        if (this.id == 0){
            this.request.post("/spare/outwarehousing/insertOutWareDto",this.form)
            .then(res=>{
                this.$message({
                    showClose: true,
                    message: '添加成功',
                    type: 'success'
                });
                this.$router.push('/outWareHousing')
            })
        }else {
            this.form.spId = this.id
            this.request.post("/spare/outwarehousing/updateOutWare",this.form)
                .then(res=>{
                    this.$message({
                        showClose: true,
                        message: '修改成功',
                        type: 'success'
                    });
                    this.$router.push('/outWareHousing')
                })
        }
    },
    handleChange(value) {
        console.log(value)
    },
    ok(){
        for (let i = 0; i < this.list.length; i++) {
            this.form.spareList.push(this.list[i])
        }
        this.dialogVisible = false
    },
    //分页跳转数据
    handleSizeChanges(pageSize) {
        this.form.pagesize = pageSize;
        this.selAllSpareLedger();
    },
    //查询人员数据
    selAllPeople(){
        this.request.get("/system/people-management/selAllPeople")
            .then(res=>{
                this.personList = res.data
            })
    },
    associationSelections(val){
        this.list = val
    },
    removeRows(){
        for (let i = 0; i < this.vals.length; i++) {
            for (let j = 0; j < this.form.spareList.length; j++) {
                console.log(this.form.spareList)
                if (this.vals[i].spId == this.form.spareList[j].spId){
                    this.form.spareList.splice(j, 1);
                    j = 0;
                }
            }
        }
    },
    //备件类型树形查询
    selAllSpareType(){
        this.request.get("/spare/spare-types/selAllSpareType")
            .then(res=>{
                this.options = res.data
            })
    },
    associationSelection(val){
        this.vals = val
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
            .then(_ => {
                done();
            })
            .catch(_ => {});
    },
    chongzhi(){
        this.forms.codeName = null
        this.forms.spTypeId = null
        this.selAllSpareLedger()
    },
    selAllSpareLedger(){
        this.request.post("/spare/spare-ledger/selAllSpareLedger",this.forms)
            .then(res=>{
                this.spareLists = res.data.items
                this.total = res.data.counts
            })
    },
    selOneToWare(){
        this.request.get("/spare/outwarehousing/selOneToWare/"+this.id)
        .then(res=>{
            console.log(res)
            this.form = res.data
        })
    },
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    this.selAllPeople()
    this.selAllSpareLedger();
    this.selAllSpareType()
    this.form.wareTime = new Date()
    this.id = this.$route.query.id
    if (this.id!=null){
        this.selOneToWare()
    }
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>

</style>
